<template>
	<view >
		<!-- 商品规格 -->
		<view class="service">
			<view class="service-left">
				<view class="service-title">已选</view>
				<view class="service-value goods-value"  >
					<text v-if="!showPaySku">请选择商品规格</text>
					<text v-else style="padding-right: 10rpx;" v-for="(val,key) in paySku.skuAttrItems">{{val}}</text>
					<text v-if="showPaySku"> - 共 {{number}} 件</text>
				</view>
			</view>
			<view class="service-right iconfont icon-diandian" @tap="popuPopuAttrPrice"></view>
		</view>
		<!-- 配送地址 -->
		<view class="service" @tap="getTakeAddress">
			<view class="service-left">
				<view class="service-title">送至</view>
				<view class="service-value address-value">
					<template v-if="!address.address">
						请选择收货地址
					</template>
					<template v-else>
						{{address.address}}-{{address.detail_address}}  
					</template>
				</view>
			</view>
			<view class="service-right iconfont icon-diandian"></view>
		</view>
		<!-- 运费 -->
		<view class="service">
			<view class="service-left">
				<view class="service-title">运费</view>
				<view class="service-value freight-value">￥2</view>
			</view>
		</view>
		<linex></linex>
		<view class="flex flex-align-items flex-wrap">
			<view class="flex  text-color-h justify-content flex-align-items font-size-25 padding-x-20">
				<view class="iconfont icon-iconfontxuanzhong4 main-text-color"></view>
				小米自营
			</view>
			<view class="flex  text-color-h justify-content flex-align-items font-size-25 padding-x-20">
				<view class="iconfont icon-iconfontxuanzhong4 main-text-color"></view>
				京东物流
			</view>
			<view class="flex  text-color-h justify-content flex-align-items font-size-25 padding-x-20">
				<view class="iconfont icon-iconfontxuanzhong4 main-text-color"></view>
				七天无理由退货
			</view>
			<view class="flex  text-color-h justify-content flex-align-items font-size-25 padding-x-20">
				<view class="iconfont icon-iconfontxuanzhong4 main-text-color"></view>
				七天无理由退货
			</view>
			<view class="flex  text-color-h justify-content flex-align-items font-size-25 padding-x-20">
				<view class="iconfont icon-iconfontxuanzhong4 main-text-color"></view>
				七天无理由退货
			</view>
			
		</view>
	</view>
</template>
<!-- 收获地址：https://jffy.oss-cn-shanghai.aliyuncs.com/89106278-d967-493a-8114-724163ac7872.png
 商品：https://jffy.oss-cn-shanghai.aliyuncs.com/ff3ac2df-a829-4ffb-bd2f-6eb38d576011.png-->
<script>
	export default{
		props:{
			paySku:{
				type:Object
			},
			payNum:{
				type:Number
			},
			address:{
				type:Object
			}
		},
		data(){
			return{
				number:this.payNum
			}
		},
		
		watch:{
			
			payNum(newVal,oldVal){
				this.number=newVal;
			}
		},
		computed:{
			showPaySku: function (){
				return this.paySku.skuAttrItems==undefined?false:true;
			}
		},
		methods:{
			popuPopuAttrPrice(){
				this.$emit("popuPopuAttrPrice");
			},
			// 获取收获地址
			getTakeAddress(){
				uni.navigateTo({
					url:"../../pages/take-address/take-address"
				})
			}
		}
	}
</script>

<style lang="less">
	.service{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 20rpx;
		border-bottom: 1rpx solid #F1F1F1;
		.service-left{
			display: flex;
			flex: 1;
			.service-title{
				width: 60rpx; //都给固定的宽度。这样文本超出不换行，就不会挤其他的元素了
				font-weight: 700;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			.service-value{  
				width: 580rpx; //都给固定的宽度。这样文本超出不换行，就不会挤其他的元素了
				//溢出显示省略号
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #999999;
			}
			.freight-value{
				color: #FD6801;
			}
		}
		.service-right{
			width: 40rpx; //都给固定的宽度。这样文本超出不换行，就不会挤其他的元素了
			font-size: 40rpx;
			
		}
	}
</style>

